<template>
<!-- 添加好友的弹窗 -->
  <div>
    <el-dialog
        :visible.sync="showAddFriendFrame"
        width="15%"
        :modal="false"
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="false"
    >
      <div class="remark-class">
        <el-input
            type="textarea"
            :rows="5"
            placeholder="留个申请问候吧..."
            v-model="friendApply.remark"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitApply()" size="mini"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {friendApply} from "@/api/userApply";

export default {
  props: {
    showAddFriendFrame: {
      type: Boolean,
      required: true,
    },
    targetUid: {
      type: Number,
      required: true,
    }
  },
  data() {
    return {
      friendApply: {
        // 申请人id
        uid: this.$store.state.user.currentUser.uid,
        // 备注
        remark: "",
        // 申请目标id
        targetId: null,
      }
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$emit("close");
    },
    // 提交申请
    submitApply() {
      // 提交好友申请
      this.friendApply.targetId = this.targetUid;
      friendApply(this.friendApply)
          .then((res) => {
            this.$message({
              type: "success",
              message: "申请成功",
            });
          })
          .catch((error) => {
            this.$message({
              type: "warning",
              message: error.errMsg,
            });
          });
      this.cancel();
    }
  }
}
</script>

<style scoped>
.remark-class >>> .el-textarea__inner {
  background-color: #2c3e50 !important;
  color: white;
}

/* 覆盖默认的背景颜色 */
.el-dialog__wrapper /deep/ .el-dialog {
  background-color: #333746;
}

/* 覆盖标题样式 */
::v-deep .el-dialog__header {
  display: none;
}

/* 覆盖内容区域样式 */
::v-deep .el-dialog__body {
  padding: 5px;
}

/* 覆盖脚部按钮区域样式 */
::v-deep .el-dialog__footer {
}
</style>